<template>
  <!-- 列表页面 -->
  <div class="tableSample" v-if="!showAdd && !showEdit">
    <div class="header">
      <div class="header-left">
        <p class="title">
          员工列表
          <!--          <el-button-->
          <!--                  type="primary"-->
          <!--                  plain-->
          <!--                  style="margin-left: 30px;"-->
          <!--                  @click="handleAdd"-->
          <!--          >添加</el-button-->
          <!--          >-->
        </p>
      </div>
      <div class="header-right">
        <lin-search @query="onQueryChange" placeholder="请输入姓名" />
        <el-select v-model="search.store_id" clearable filterable placeholder="请选择店面" style="margin-left: 15px" @change="onSelectChange">
          <el-option
              v-for="item in storeData"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="search.group_id" clearable filterable placeholder="请选择组" style="margin-left: 15px" @change="onSelectChangeOne">
          <el-option
              v-for="item in groupData"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="search.type" clearable filterable placeholder="请选择员工类型" style="margin-left: 15px" @change="onSelectChangeTwo">
          <el-option
              v-for="item in typeData"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 表格 -->
    <lin-table
        border
        :tableColumn="tableColumn"
        :tableData="tableData"
        :operate="operate"
        @handleEdit="handleEdit"
        @handleDelete="handleDelete"
        v-loading="loading"
    ></lin-table>
    <!-- 分页 -->
    <!--            @sortChange="sortChange"-->
    <div class="pagination" v-if="total_nums > 0">
      <el-pagination
          @current-change="handleCurrentChange"
          :background="true"
          :page-size="pageCount"
          :current-page="currentPage"
          v-if="refreshPagination"
          layout="prev, pager, next, jumper"
          :operate="operate"
          :total="total_nums"
      ></el-pagination>
    </div>
  </div>
  <store-user-add
      v-else-if="showAdd"
      @addClose="addClose"
  ></store-user-add>
  <store-user-edit
      v-else-if="showEdit"
      @editClose="editClose"
      :StoreUserId="StoreUserId"
  ></store-user-edit>
</template>

<script>
import Store from '@/models/store'
import StoreGroup from '@/models/store-group'
import StoreUser from '@/models/store-user'
import LinSearch from '@/components/base/search/lin-search'
import LinTable from '@/components/base/table/lin-table'
import StoreUserAdd from './StoreUserAdd'
import StoreUserEdit from './StoreUserEdit'

export default {
  components: {
    LinSearch,
    LinTable,
    StoreUserAdd,
    StoreUserEdit,
  },
  data() {
    return {
      tableColumn: [
        {
          prop: 'store.name',
          label: '所属店面',
        },
        {
          prop: 'group.name',
          label: '所属组',
        },
        {
          prop: 'type_name',
          label: '员工类型',
        },
        {
          prop: 'name',
          label: '员工姓名',
        },
        {
          prop: 'user.openid',
          label: 'openid',
        },
        {
          prop: 'user.nickname',
          label: '用户昵称',
        },
        {
          prop: 'phone',
          label: '联系电话',
          width: 150,
        },
        {
          prop: 'user.money',
          label: '员工余额',
          // sortable: 'custom',
          width: 150,
        },
        {
          prop: 'user.invite_money',
          label: '顾客佣金',
          width: 150,
        },
        {
          prop: 'remarks',
          label: '备注',
        },
        {
          prop: 'desc',
          label: '简介',
        },
        {
          prop: 'create_time',
          label: '创建时间',
          width: 210,
        },
      ],
      tableData: [],
      storeData: [],
      groupData: [],
      typeData: [{
        id: 1,
        name: '店长',
      }, {
        id: 2,
        name: '组长',
      }, {
        id: 3,
        name: '员工',
      }, {
        id: 4,
        name: '老板',
      }],
      operate: [],
      loading: false,
      showAdd: false,
      showEdit: false,
      StoreUserId: 0,
      search: {
        name: '',
        store_id: '',
        group_id: '',
        type: '',
      },
      // 分页相关
      refreshPagination: true, // 页数增加的时候，因为缓存的缘故，需要刷新Pagination组件
      currentPage: 1, // 默认获取第一页的数据
      pageCount: 10, // 每页10条数据
      total_nums: 0, // 分组内的总数
    }
  },
  computed: {},
  created() {
    this.getStoreAll()
    this.getStoreGroupAll()
    this._getTableData(this.currentPage, this.pageCount)
    this.operate = [
      { name: '编辑', func: 'handleEdit', type: 'primary' },
      { name: '删除', func: 'handleDelete', type: 'danger' },
    ]
  },
  methods: {
    // sortChange(val) {
    //   console.log(val)
    // },
    async getStoreGroupAll() {
      this.groupData = await StoreGroup.getStoreGroupAll({ store_id: this.search.store_id })
    },
    async getStoreAll() {
      this.storeData = await Store.getStoreAll()
    },
    handleDelete(val) {
      this
          .$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(async () => {
            const res = await StoreUser.deleteStoreUser(val.row.id)
            if (res.error_code === 0) {
              this.$message({
                type: 'success',
                message: `${res.msg}`,
              })
              this.loading = true
              this._getTableData(this.currentPage, this.pageCount)
            }
          })
    },
    handleAdd() {
      this.showAdd = true
    },
    handleEdit(val) {
      this.showEdit = true
      this.StoreUserId = val.row.id
    },
    addClose() {
      this.showAdd = false
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    editClose() {
      this.showEdit = false
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 切换分页
    async handleCurrentChange(val) {
      this.currentPage = val
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 搜索姓名
    onQueryChange(query) {
      this.search.name = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.loading = true
      this.currentPage = 1
      this._getTableData(this.currentPage, this.pageCount)
    },
    onSelectChange() {
      this.loading = true
      this.search.group_id = ''
      this.getStoreGroupAll()
      this.currentPage = 1
      this._getTableData(this.currentPage, this.pageCount)
    },
    onSelectChangeOne() {
      this.loading = true
      this.currentPage = 1
      this._getTableData(this.currentPage, this.pageCount)
    },
    onSelectChangeTwo() {
      this.loading = true
      this.currentPage = 1
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 获取数据
    async _getTableData(start, count) {
      const res = await StoreUser.getStoreUserList(start, count, {
        name: this.search.name,
        store_id: this.search.store_id,
        group_id: this.search.group_id,
        type: this.search.type,
      })
      this.tableData = res.data
      this.total_nums = res.count
      this.$nextTick(() => {
        this.loading = false
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.tableSample {
  padding: 0 0 30px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    border-bottom: 1px solid #dae1ed;

    .header-left {
      float: left;

      .title {
        height: 59px;
        line-height: 59px;
        color: $parent-title-color;
        font-size: 16px;
        font-weight: 500;
      }
    }

    .header-right {
      float: right;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .table-main {
    padding: 0 30px;
    margin-top: 30px;
  }

  .top-operate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    margin-top: 30px;
  }

  .sort-input {
    width: 50px;
    background: none;
    justify-content: space-around;
  }

  .table-edit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    .content {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cell-icon {
      cursor: pointer;
      color: #3963bc;
      font-size: 16px;
    }

    .cell-icon-edit {
      display: flex;
      margin-left: 20px;
      width: 50px;
      justify-content: space-between;

      .cell-cancel {
        cursor: pointer;
        color: #3963bc;
        font-size: 16px;
      }

      .cell-save {
        cursor: pointer;
        color: #3963bc;
        font-size: 16px;
        margin-right: -20px;
      }
    }
  }

  .m-20 {
    margin-bottom: 10px;
    margin-top: 5px;
  }

  .summary {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;

    img {
      width: 135px;
      height: 200px;
    }

    .demo-table-expand {
      font-size: 0;
      margin-left: 30px;
      display: flex;
      flex-direction: column;

      label {
        width: 90px;
        color: #99a9bf;
      }

      .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        display: flex;
        flex-direction: row;
      }
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
  }
}
// dialog
.tableSample /deep/ .el-dialog__footer {
  text-align: left;
  padding-left: 30px;
}

.tableSample /deep/ .el-dialog__header {
  padding-left: 30px;
}

.tableSample /deep/ .el-dialog__body {
  padding: 30px;
}
</style>